<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 引入ECharts库 -->
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
</head>

<body>
  <!-- 为ECharts图表准备一个具备大小（宽高）的DOM容器 -->
  <div id="main" style="width: 600px;height:400px;"></div>
  <script src="./echarts.min.js"></script>
  <script>
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 图表的配置项和数据
    var option = {
      series: [
        {
          radius: '50%',
          center: ['20%', '30%'],
          title: {
            offsetCenter: ["0", "-46%"]
          },
          type: 'gauge',
          axisLine: {
            lineStyle: {
              width: 5,
              color: [
                [0.2, '#91CA8C'],
                [0.8, '#37a2da'],
                [1, '#fd666d']
              ]
            }
          },
          pointer: {
            itemStyle: {
              color: 'red'
            }
          },
          axisTick: {
            distance: -2,
            length: 5,
            lineStyle: {
              color: '#759AA0',
              width: 2
            }
          },
          splitLine: {
            distance: -2,
            length: 10,
            lineStyle: {
              color: '#759AA0',
              width: 4
            }
          },
          axisLabel: {
            color: 'inherit',
            distance: 10,
            fontSize: 10,
            // max: 3000 // 设置最大值为3000
          },
          detail: {
            valueAnimation: true,
            formatter: '示例数据', // 这里只是简单示例，你可以根据实际需求修改
            fontSize: 15,
            color: 'inherit'
          },
          data: [
            {
              name: '示例名称',
              value: 1500 // 这里设置一个示例数据值
            }
          ]
        }
      ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  </script>
</body>

</html>